<script setup>
import { reactive } from 'vue'
import request from '@/utils/request'

const { proxy } = getCurrentInstance()

const emit = defineEmits(['close'])

const props = defineProps({
  // 控制弹窗
  isShow: {
    type: Boolean,
    default: false
  },
  // 后端所需id
  id: {
    type: String || Number,
    default: ''
  },
  //   接口地址
  url: {
    type: String,
    default: ''
  },
  // 详情类型
  type: {
    type: String,
    default: undefined
  },
  revokeUrl: {
    type: String,
    default: ''
  },
  ischu: {
    type: Boolean,
    default: false
  }
})
// 表单
const ruleForm = reactive({
  handoverName: '', // 交接人
  executionOrder: 1,
  netWeight: '', // 净重
  id: '', // id
  inputValue: '' // 输入框
})

// 接口返回信息i
const returnForm = reactive({
  loading: false,
  placeholder: '请输入工号', // 站位提示
  docHandoverMethod: '', // 3 整单 2 批次 1 单个物料
  docHandoverMethodDict: '',
  message: '', // 提示内容
  handoverName: '', // 交接人
  quantityIdentification: '', // 计划量/实际量
  outHandoverActual: '' // 出库数量/交接数量
})

// 详情接口
const gitDeit = async () => {
  try {
    proxy.$modal.loading('请稍候...')
    if (!props.id) return proxy.errorMsg('开发:请传入id!!!')
    if (!props.type) return proxy.errorMsg('开发:请传入详情接口类型!!!')
    const { data: res } = await request({
      url: '/storage/purchase-receipt/androidHandoverView',
      method: 'GET',
      params: {
        id: props.id,
        number: props.type
      }
    })
    returnForm.docHandoverMethodDict = res.handoverMethodDict
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 提交
const submit = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.url) return proxy.errorMsg('请传入接口url!!!')
  ruleForm.id = props.id

  try {
    proxy.$modal.loading('请稍候...')

    const { data: res } = await request({
      url: '/storage' + props.url,
      method: 'POST',
      data: ruleForm
    })
    // 响应信息
    returnForm.message += `${res.message || ''}<br />`
    if (res.resultCode != 200) return proxy.errorMsg(res.message || '后端没有提示')
    //  步骤1  =>交接人
    if (ruleForm.executionOrder == 1) {
      returnForm.handoverName = res.handoverName
      // docHandoverMethod 为 3 整单时
      if (res.docHandoverMethod == 3) {
        returnForm.docHandoverMethodDict = '整个单据'
        returnForm.placeholder = ''
      }
      // docHandoverMethod 为 2 批次号时
      if (res.docHandoverMethod == 2) {
        returnForm.docHandoverMethodDict = '批次号'
        returnForm.placeholder = '请输入批次号'
      }
      // docHandoverMethod 为 1 单个物料时
      if (res.docHandoverMethod == 1) {
        returnForm.docHandoverMethodDict = '单个物料'
        returnForm.placeholder = '请扫描/输入物料条码'
      }
    }
    returnForm.quantityIdentification = res.quantityIdentification
    returnForm.outHandoverActual = res.outHandoverActual
    // 请求成功步骤 + 1
    ruleForm.executionOrder = 2
    // if (ruleForm.executionOrder >= 3) ruleForm.executionOrder = 1
    ruleForm.inputValue = ''
  } catch (err) {
    proxy.errorMsg('错误=>' + err)
    new Error(err)
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 撤销
const revoke = async () => {
  if (!props.id) return proxy.errorMsg('请传入id!!!')
  if (!props.revokeUrl) return proxy.errorMsg('请传入撤销接口url!!!')
  await request({
    url: '/storage' + props.revokeUrl + '/' + props.id,
    method: 'GET'
  })
  emit('yes')
}

// 关闭弹窗
const close = () => {
  for (let Key in returnForm) {
    returnForm[Key] = ''
  }
  for (let Key in ruleForm) {
    ruleForm[Key] = ''
  }
  ruleForm.executionOrder = 1
  emit('close')
}

watch(
  () => props.isShow,
  val => {
    for (let Key in returnForm) {
      returnForm[Key] = ''
    }
    for (let Key in ruleForm) {
      ruleForm[Key] = ''
    }
    ruleForm.executionOrder = 1
    returnForm.placeholder = '请输入工号'
    if (val) {
      setTimeout(() => {
        gitDeit()
      }, 200)
    }
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<template>
  <div class="app-container">
    <p-XiaoheDialog :dialogVisible="props.isShow" title="交接" @close="close" width="25%">
      <template #body>
        <el-form label-width="80px" status-icon>
          <el-form-item label="交接方式">
            <div>{{ returnForm.docHandoverMethodDict }}</div>
          </el-form-item>
          <el-form-item label="交接人">
            <el-input disabled v-model="returnForm.handoverName" />
          </el-form-item>
          <el-form-item label="输入栏">
            <el-input v-model="ruleForm.inputValue" @keyup.enter="submit" :placeholder="returnForm.placeholder" />
          </el-form-item>
        </el-form>
        <div style="width: 100%; margin-top: 10px">
          <div class="flex-between">
            <span>
              <span>{{ props.ischu ? '出库' : '入库' }}</span> /交接数量：{{
                returnForm.quantityIdentification || 0
              }}</span
            >
            <span>
              <span>{{ props.ischu ? '入库' : '出库' }}</span> /交接数量{{ returnForm.outHandoverActual || 0 }}</span
            >
          </div>
          <div class="textarea" v-html="returnForm.message"></div>
          <div class="footer_btn">
            <div class="b">
              <el-button v-if="props.revokeUrl" type="primary" @click="revoke">拣货撤销</el-button>
            </div>
          </div>
        </div>
      </template>
    </p-XiaoheDialog>
  </div>
</template>
<style lang="scss" scoped>
.footer_btn {
  margin-top: 20px;
  width: 100%;
}
.b {
  float: right;
}

.app-container ::v-deep .el-textarea__inner {
  height: 150px !important;
}
.flex-between {
  width: 300px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.textarea {
  height: 150px;
  border: 1px solid #dbdbdb;
  overflow: auto;
}
</style>
